import { ArrowLeft, ExternalLink, DollarSign, Shield, Heart } from 'lucide-react';
import { Button } from '../components/Button';
import { usePageTitle } from '../lib/usePageTitle';

export function AffiliateDisclosurePage() {
  usePageTitle({
    title: 'Affiliate Disclosure',
    description: 'VitaIncubator\'s affiliate disclosure and transparency about our partnerships and commissions.'
  });
  
  return (
    <div className="w-full bg-[#0a2540] text-white min-h-screen">
      <div className="container mx-auto px-4 md:px-8 py-16">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <Button 
              href="/"
              variant="secondary"
              className="mb-6"
            >
              <ArrowLeft size={16} className="mr-2" />
              Back to Home
            </Button>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Affiliate Disclosure</h1>
            <p className="text-gray-300 text-lg">
              Transparency is at the heart of everything we do at VitaIncubator
            </p>
          </div>

          <div className="bg-[#061a2c] p-6 rounded-lg mb-8">
            <div className="flex items-center mb-4">
              <Shield className="text-[#06d6a0] mr-3" size={24} />
              <h2 className="text-xl font-bold">Our Commitment to Transparency</h2>
            </div>
            <p className="text-gray-300">
              We believe in complete transparency about our affiliate relationships. This disclosure explains how we earn revenue 
              and ensures you can trust our recommendations are based on merit, not financial incentives.
            </p>
          </div>

          <div className="prose prose-invert max-w-none">
            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">What Are Affiliate Links?</h2>
              <p className="text-gray-300 mb-4">
                Affiliate links are special URLs that allow us to earn a small commission when you purchase a product through our recommendation. 
                When you click on an affiliate link and make a purchase, the retailer pays us a percentage of the sale.
              </p>
              <div className="bg-[#0d2b47] p-4 rounded-lg mb-4">
                <p className="text-sm text-gray-300">
                  <strong>Important:</strong> Using our affiliate links doesn't cost you anything extra. The price you pay remains exactly the same 
                  whether you use our link or go directly to the retailer.
                </p>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">Our Affiliate Partners</h2>
              <p className="text-gray-300 mb-4">
                VitaIncubator participates in affiliate programs with various retailers and brands, including:
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="bg-[#061a2c] p-4 rounded-lg">
                  <h3 className="font-bold mb-2 flex items-center">
                    <ExternalLink size={16} className="mr-2 text-[#06d6a0]" />
                    Amazon Associates
                  </h3>
                  <p className="text-sm text-gray-300">We earn from qualifying purchases made through Amazon links.</p>
                </div>
                <div className="bg-[#061a2c] p-4 rounded-lg">
                  <h3 className="font-bold mb-2 flex items-center">
                    <ExternalLink size={16} className="mr-2 text-[#06d6a0]" />
                    Direct Brand Partnerships
                  </h3>
                  <p className="text-sm text-gray-300">We partner directly with select health and wellness brands.</p>
                </div>
                <div className="bg-[#061a2c] p-4 rounded-lg">
                  <h3 className="font-bold mb-2 flex items-center">
                    <ExternalLink size={16} className="mr-2 text-[#06d6a0]" />
                    Affiliate Networks
                  </h3>
                  <p className="text-sm text-gray-300">We participate in networks like ShareASale, CJ Affiliate, and others.</p>
                </div>
                <div className="bg-[#061a2c] p-4 rounded-lg">
                  <h3 className="font-bold mb-2 flex items-center">
                    <ExternalLink size={16} className="mr-2 text-[#06d6a0]" />
                    Health & Wellness Retailers
                  </h3>
                  <p className="text-sm text-gray-300">Partnerships with specialized health and fitness retailers.</p>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">How We Maintain Editorial Integrity</h2>
              <div className="space-y-4">
                <div className="flex items-start">
                  <Heart className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={20} />
                  <div>
                    <h3 className="font-bold mb-2">We Only Recommend Products We Believe In</h3>
                    <p className="text-gray-300">
                      Every product we recommend goes through rigorous testing and evaluation. We never recommend a product 
                      solely because of potential commissions.
                    </p>
                  </div>
                </div>
                <div className="flex items-start">
                  <Shield className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={20} />
                  <div>
                    <h3 className="font-bold mb-2">Independent Testing Process</h3>
                    <p className="text-gray-300">
                      We purchase and test products independently. Our review process is not influenced by affiliate relationships 
                      or potential earnings.
                    </p>
                  </div>
                </div>
                <div className="flex items-start">
                  <DollarSign className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={20} />
                  <div>
                    <h3 className="font-bold mb-2">Clear Disclosure</h3>
                    <p className="text-gray-300">
                      We clearly mark affiliate links and disclose our relationships. You'll always know when we might earn a commission 
                      from your purchase.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">How Commission Revenue Is Used</h2>
              <p className="text-gray-300 mb-4">
                The commissions we earn from affiliate partnerships help us:
              </p>
              <ul className="list-disc list-inside text-gray-300 mb-4 space-y-2">
                <li>Purchase products for independent testing and review</li>
                <li>Maintain and improve our website and testing facilities</li>
                <li>Compensate our expert review team</li>
                <li>Create comprehensive guides and educational content</li>
                <li>Keep our content free for all users</li>
              </ul>
            </section>

            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">FTC Compliance</h2>
              <div className="bg-[#0d2b47] p-6 rounded-lg">
                <p className="text-gray-300 mb-4">
                  In accordance with FTC guidelines, we disclose that VitaIncubator has financial relationships with some of the products 
                  and services mentioned on this website. We may be compensated if you purchase products or services after clicking links 
                  on our website.
                </p>
                <p className="text-gray-300">
                  This disclosure is provided in accordance with the Federal Trade Commission's 16 CFR, Part 255: "Guides Concerning the 
                  Use of Endorsements and Testimonials in Advertising."
                </p>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">Your Trust Matters</h2>
              <p className="text-gray-300 mb-4">
                We understand that trust is earned through consistent, honest communication. Our affiliate relationships allow us to 
                continue providing valuable content while keeping our website free for users. We're committed to:
              </p>
              <ul className="list-disc list-inside text-gray-300 mb-4 space-y-2">
                <li>Always putting your interests first</li>
                <li>Providing honest, unbiased reviews</li>
                <li>Being transparent about our business relationships</li>
                <li>Continuously improving our review standards</li>
              </ul>
            </section>

            <section className="mb-8">
              <h2 className="text-2xl font-bold mb-4 text-[#06d6a0]">Questions or Concerns?</h2>
              <p className="text-gray-300 mb-4">
                If you have any questions about our affiliate relationships or this disclosure, we encourage you to reach out to us:
              </p>
              <div className="bg-[#061a2c] p-6 rounded-lg">
                <p className="text-gray-300">
                  Email: <a href="mailto:transparency@vitaincubator.com" className="text-[#06d6a0] hover:underline">transparency@vitaincubator.com</a><br />
                  Or visit our <a href="/contact" className="text-[#06d6a0] hover:underline">Contact Page</a> for more ways to get in touch.
                </p>
              </div>
            </section>
          </div>

          <div className="mt-12 pt-8 border-t border-[#1a3a5c]">
            <p className="text-sm text-gray-400 mb-6">
              Last updated: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button href="/terms-of-service" variant="secondary">
                View Terms of Service
              </Button>
              <Button href="/privacy-policy" variant="secondary">
                View Privacy Policy
              </Button>
              <Button href="/contact">
                Contact Us
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
